<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:cache&gt;</code> component allows to cache a fragment of rendered markup. The first
			request for a page that has this component on it will cause this markup to be put into the cache. Then
			for subsequent requests the cached content is used directly and none of the components, backing beans
			and services that were used to generate this content in the first place will be consulted.
		</p>
		<p>
			Caching can take place in application scope, or in session scope. For individual fragments a
			time can be specified for which the cached content is valid. After this time is elapsed, the very
			first request to the page containing the cache component in question will cause new content to be 
			rendered and put into the cache. A default time can be set per scope in web.xml.
		</p>
		<p>
			For each scope a maximum capacity can be set. If the capacity for that scope is exceeded, an element will be
			removed following a least recently used policy (LRU).
		</p>
		<p>
			Via a cache provider mechanism an alternative cache implementation can be configured in web.xml. The default
			cache is based on <a href="http://code.google.com/p/concurrentlinkedhashmap">http://code.google.com/p/concurrentlinkedhashmap</a>.
		</p>
	</ui:define>

	<ui:define name="demo">
		<p>
			<b>Now:</b> #{now}
		</p>

		<hr/>
		
		<h3>Example 1</h3>
		<p>
			The following renders a couple of items in a default cache, which means the session scope is used without a timeout. 
			On the first page refresh, all items should have the same time as indicated by "<code>Now</code>" above.
			After a page refresh the time of the items should stay constant, indicating cached content is used. 
		</p>
		<p>
			<o:cache>
				<ui:repeat value="#{cacheBean.items}" var="item">
		  			<i>#{item}</i> <br/>
		  		</ui:repeat>
			</o:cache>
  		</p>

  		<hr/>
  		
  		<h3>Example 2</h3>
  		<p>
			The following renders a time-stamp in the session scoped cache, for which a time to live has been set to 15 seconds.
			On the first page refresh, it should be equal again to the time as indicated by "<code>Now</code>" above. 
			For page refreshes done within 15 seconds after this first request it should be constant. After this time, 
			it should change into the "<code>Now</code>" time again, meaning a timeout took place and new content was rendered.
		</p>
		<p>
			<o:cache time="15">
				<i>Session scope content valid for 15 seconds generated at: #{now}</i>
			</o:cache>
  		</p>

  		<hr/>
  		
  		<h3>Example 3</h3>
  		<p>
  			The following renders a time-stamp in the session scoped cache again, this time using an explicit and dynamic key.
  			For this show case application, the number of items in the session cache has been set to <code>4</code>
  			using the following setting in <code>web.xml</code>:
  		</p>
		<pre>
&lt;context-param&gt;
    &lt;param-name&gt;org.omnifaces.CACHE_SETTING_SESSION_MAX_CAPACITY&lt;/param-name&gt;
    &lt;param-value&gt;4&lt;/param-value&gt;
&lt;/context-param&gt;
  		</pre>
  		<p>
  			Since 2 items have been used already by the previous two examples, only 2 more fit it.
  		</p>
  		<p>
  			This can be demonstrated by generating cache items via the numbered buttons shown below. 
  			Clicking on any two of the same numbers below will switch between the cached content for those
  			and will keep showing the time-stamp associated with them on their first click. 
  			Upon clicking a third number, and then clicking the number of the original 2 that was clicked the
  			longest time ago, a new time-stamp will be associated with that.
  		</p>
  		<p>
  			This means the treshold of 4 cached items had been exceeded and the last accessed item was evicted. 
  		</p>
  		<p>
  			E.g. click 0, click 1, click 0 (notice it has the same time-stamp), click 1 (same timestamp), 
  			click 2, click 0 (gets new time-stamp)
  		</p>
		<h:form>
			Set Cache key to: 
			<h:commandButton action="#{cacheBean.setKey(0)}" value="0" />, 
			<h:commandButton action="#{cacheBean.setKey(1)}" value="1" />, 
			<h:commandButton action="#{cacheBean.setKey(2)}" value="2" />, 
			<h:commandButton action="#{cacheBean.setKey(3)}" value="3" />
		</h:form>
		<p>
			<o:cache key="test-#{cacheBean.key}">
				<i>Session scope content for key #{cacheBean.key} generated at: #{now}</i>
			</o:cache>
  		</p>
	</ui:define>
</ui:composition>